<template>
	<view class="control">
		<!-- :style="{ backgroundImage: 'url('+backgroundImage+')' }" -->
		<view class="item-list" v-for="(items,indexs) in list" :key="indexs" v-if="items.children !=''">
			<view class="list-title">
				{{items.venue_name}}
			</view>
			<view class="font_2">
				{{items.address}}
			</view>
			<view class="venues-list">
				<view class="venues-item" v-for="(item,index1) in items.children" :key="index1"
					@click="openStoreDetail(item)">
					<u--image width="100%" height="90" :src="item.venue_thumb">

					</u--image>
					<view class="detail">
						<view class="name">{{item.venue_name}}</view>
						<view class="timer">营业时间:{{item.open_time}}</view>
						<view class="tag-list flex-align">
							<u-tag v-for="(item2,index2) in item.marks" :key="index2" :text="item2.name" plain
								size="mini"> </u-tag>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				list: [],
			}
		},
		onLoad() {
			this.getRecommendVenueMore()
		},
		methods: {
			//场馆详情
			openStoreDetail(item) {
				uni.navigateTo({
					url: "/page_points/storeDetail/storeDetail?id=" + item.id,
				});
			},
			// 获取推荐场馆信息
			async getRecommendVenueMore(id) {
				// uni.showLoading({
				// 	title: "加载中",
				// });
				let postData = {
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
				};
				let result = await venues.getRecommendVenueMore(postData);
				if (result.code === 1) {
					this.list = result.data.result

				}
			},
			openDetail() {}
		}
	}
</script>

<style scoped lang="scss">
	.control {
		width: 100%;
		min-height: 100vh;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #ffffff;

		.item-list {
			width: 100%;
			height: 100%;
			margin-bottom: 30rpx;
			border-radius: 20rpx;
			background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/805a5d9ceb73d4e3c9cd09b9a456e7f4f97b472c.png') 0% no-repeat;
			background-position: center top;
			// background-size: 100% 100%;

			.list-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #003a96;
				margin-left: 3.5%;
				padding-top: 20rpx;
			}

			.font_2 {
				font-size: 22rpx;
				color: #888888;
				margin-left: 3.5%;
				margin-top: 10rpx;
			}

			.venues-list {
				display: flex;
				flex-wrap: wrap;
				// justify-content: space-between;

				.venues-item {
					width: 45%;
					background-color: white;
					border-radius: 10rpx;
					// overflow: hidden;
					margin-top: 25rpx;
					margin-left: 3.5%;
					box-shadow: 0px 0px 5px #d3d3d3;

					.detail {
						box-sizing: border-box;
						padding: 10rpx 10rpx 20rpx 10rpx;

						.name {
							font-size: 26rpx;
							margin-bottom: 10rpx;
							color: #333333;
						}

						.timer {
							font-size: 23rpx;
							color: #cecece;
							height: 40rpx;
						}

						.tag-list {
							/deep/ .u-tag {
								height: 37rpx;
								margin-right: 10rpx !important;

								.u-tag__text {
									font-size: 23rpx !important;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
